<template>
    <div class="">
        <dl class="m-categroy">
            <dt>按拼音首字母选择:</dt>
            <dd v-for="item of list" :key="item">
                <!-- 用锚点做跳转 -->
                <a style="color: #666" :href="'#city-' + item">{{item}}</a>
            </dd>
        </dl>
        <dl v-for="item of List" :key="item.title" class="m-categroy-section">
            <dt :id="'city-' + item.title">{{item.title}}</dt>
            <dd>
                <span   class="area" v-for="items in item.city" :key="items">
                    {{items}}
                </span>
            </dd>
        </dl>
    </div>
</template>

<script>
import jspy from 'js-pinyin'
export default {
    data() {
        return {
            list: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
            List: [],
            color: false
        }
    },
    async mounted() {
        let _this = this
        let List = []
        let {status,data: {city}} = await _this.$axios.get('/geo/city')
        if (status === 200) {
            // 这个位置要用到一个强大的拼音库  就是js-pinyin
            let p
            let c
            let d = {}
            city.forEach((item) => {
                p = jspy.getFullChars(item.name).toLocaleLowerCase().slice(0,1)
                
                // chaCodeAt()这个方法是获得字符的Unicode编码 a的编码是97 z的编码是122 A的编码是65 Z的编码是90
                // c = p.charCodeAt(0)
                // if(c > 96 && c < 123) {
                //     if (!d[p]) {
                //         d[p] = []
                //     }
                //     d[p].push(item.name.replace('市',''))
                // }
                // 上面这段代码是为了得到小写的字母  但上面已经通过toLocaleLowerCase做了处理
                if (!d[p]) {
                    d[p] = []
                }
                d[p].push(item.name.replace('市',''))
            })
            for(let [k,v] of Object.entries(d)) {
                List.push({
                    title: k.toUpperCase(),
                    city: v
                })
            }
            List.sort((a,b) => {
                return a.title.charCodeAt(0) - b.title.charCodeAt(0)
            })
            
            _this.List = List
        }
    },
    // methods: {
    //     a() {
    //         this.$refs.span.map((item) => {
    //             if (item.innerText === '北京') {
    //                 this.color = true
    //             }
    //         })
    //         // console.log(this.$refs.span[0].innerText)
    //     }
    // }
}
</script>

<style lang="scss">
    .m-categroy {
        width: 1148xpx;
        display: flex;
        direction: row;
        margin-top: 40px;
        margin-bottom: 20px;
        dt {
            font-size: 16px;
            color: #333;
            font-weight: 500;
        }
        dd {
            font-size: 15px;
            // color: #666 !important;
            display: inline-block;
            margin: 0 6px;
            width: 25px;
            height: 25px;
            line-height: 20px;
            padding-top: 2px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            border-radius: 50%;
            &:hover {
                background: #f8f7f7;
            }
        }
    }
    .m-categroy-section {
        display: flex;
        flex-direction: row;
        margin-bottom: 40px;
        box-sizing: border-box;
        flex-wrap: wrap;
        &:hover{
             background: #f8f7f7; 
        }
        dt {
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 40px;
            border-radius: 50%;
            color: #fff;
            background: #13D1BE;
            display: inline-block;
            margin-right: 40px;
            
        }
        dd {
            // height: 40px;
            line-height: 40px;
            width: 1000px;
            cursor: pointer;
            span {
                margin-right: 30px;
                color: #666;
                
                &:hover {
                    color:#13D1BE; 
                }
               
            }
        }
    }
</style>


